/**
 * @file ext-overview_window.js
 *
 * @license MIT
 *
 * @copyright 2013 James Sacksteder
 *
 */

export default {
  name: 'overview_window',
  init ({ _$ }) {
    const svgEditor = this
    const {
      svgCanvas
    } = svgEditor
    const { $id, $click ,$} = svgCanvas

   //统一设置viewbox
   const updateViewBox = function(){
    let { x, y, width, height } = svgCanvas.getSvgContent().getBBox()

    if(Number.isNaN(x) || Number.isNaN(y) || Number.isNaN(width) || Number.isNaN(height)){
      return
    }
   
    var drawing = svgCanvas.getCurrentDrawing() ;
    var allLays = drawing.all_layers
    for(var i = 0; i<allLays.length;i++){
      if($id('overviewMiniView' + i)){
        $id('overviewMiniView' + i).setAttribute('viewBox', x + ' ' + y + ' ' + (width<=0?10:width) + ' ' + (height<=0?10:height))
        $id('overviewMiniView' + i).setAttribute('width', width>400?(width/4>150?150:width/4):100)
        $id('overviewMiniView' + i).setAttribute('height', height>400?(height/4>140?140:height/4):100)
      }
    }
   }

    const initPropsWindow = () =>{
      if(!$id('bottomLayer')){
        const divF = `<div id="bottomLayer" style="height:500px; margin-top:10px;overflow:hidden;overflow-y:auto"></div>`;
        $id('sidepanel_content').insertAdjacentHTML('beforeend', divF)
      }else{
        $('#bottomLayer').empty()
      }
      var drawing = svgCanvas.getCurrentDrawing()
      var allLays = drawing.all_layers

      var index = 0;
      for(index = 0;index<allLays.length;index++){
        allLays[index].group_.setAttribute("id",`g${index}`)
        var hasFill1 = $(allLays[index].group_).find("*[fill^='#']").length;
        var hasFill2 = $(allLays[index].group_).find("*[fill^='url']").length;
        var className = ""
        if(hasFill1>0 || hasFill2>0){
          className= "useFill"
        }
        const propsWindowHtml =
            `<div id="overview_window_content_pane${index}" style="word-wrap:break-word;  display:inline-block; margin-top:10px;">
              <div id="overview_window_content${index}" style="position:relative; padding-left:15px; top:0px;">
                  <div style="background-color:#A0A0A0; display:inline-block; overflow:visible;">
                      <svg id="overviewMiniView${index}" width="100" height="100" x="0" y="0" viewBox="0 0 400 400"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <use x="0" y="0" class="useClass ${className}" xlink:href="#g${index}"> </use>
                      </svg>
                  </div>
                </div>
            </div>`
          $id('bottomLayer').insertAdjacentHTML('beforeend', propsWindowHtml)
      }
      updateViewBox()
    }
    initPropsWindow()
   
    return {
      name: 'overview window',
      initPropsWindow:initPropsWindow,
      caculateGBBox:updateViewBox
    }
  }
}
